﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/layui-v2.5.4/layui/css/modules/layer/default/layer.css" rel="stylesheet" type="text/css" />
    <link href="~/layui-v2.5.4/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script type="text/javascript" src="~/layui-v2.5.4/layui/layui.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
      <![endif]-->
    <title>分类列表</title>
</head>
<body>
    <div class="margin" id="page_style">
        @*<div class="operation clearfix mb15 same_module">
                <ul class="choice_search">
                    <li class="clearfix col-xs-3 col-lg-3 col-ms-3 "><label class="label_name ">产品名称：</label><input name="" type="text" class="form-control col-xs-8 col-lg-8 col-ms-8"></li>
                    <li class="clearfix col-xs-5 col-lg-5 col-ms-5 ">
                        <label class="label_name ">添加时间：</label>
                        <input class="laydate-icon col-xs-4 col-lg-3 form-control Select_Date" id="start">
                        <span style=" float:left; padding:0px 10px; line-height:32px;">至</span>
                        <input class="laydate-icon col-xs-4 col-lg-3 form-control Select_Date" id="end">
                        <button class="btn button_btn bg-deep-blue " onclick="" type="button"><i class="fa  fa-search"></i>&nbsp;搜索</button>
                    </li>
                </ul>
            </div>*@
        <!--列表展示-->
        <div class="h_products_list clearfix" id="Sellerber">
            <div class="Sellerber_left menu" id="menuBar">
                <div class="show_btn" id="rightArrow"><span></span></div>
                <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                <div class="menu_style" id="menu_style">
                    <div class="list_content">
                        <div class="side_list">
                            <div class="column_title"><h4 class="lighter smaller">产品类型列表</h4></div>
                            <div class="st_tree_style tree">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list_Exhibition list_show padding15">
                <div class="operation clearfix mb15 searchs_style">
                    <span class="submenu">
                        <a href="/Home/Add_Picture" name="" class="btn button_btn bg-deep-blue" title="添加产品"><i class="fa  fa-edit"></i>&nbsp;添加分类</a>
                    </span>
                    <div class="search  clearfix">
                        <label class="label_name">商品搜索：</label><input name="" type="text" class="form-control col-xs-5" /><button class="btn button_btn bg-deep-blue " onclick="" type="button"><i class="fa  fa-search"></i>&nbsp;搜索</button>
                        <span>数量：3433件</span>
                    </div>
                </div>
                <div class="datalist_show">
                    <div class="datatable_height confirm">
                        <table class="layui-hide" id="test" lay-filter="demo"></table>
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </script>
                        <script type="text/html" id="switchConnection">
                            <input type="checkbox" id="{{d.Pic_Id}}" name="State" value="{{d.Is_Master}}" lay-skin="switch" lay-text="是|否" lay-filter="sexDemo2" {{ d.Is_Master == 1 ? 'checked' : '' }} />

                        </script>
                        <script type="text/html" id="switchNewWindows">
                            <input type="checkbox" id="{{d.Pic_Id}}" name="State" value="{{d.Pic_Status}}" lay-skin="switch" lay-text="是|否" lay-filter="sexDemo3" {{ d.Pic_Status == 1 ? 'checked' : '' }} />

                        </script>
                        <script type="text/html" id="imgUrl">
                            <img src="{{d.Pic_Url}}" style="" />
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="~/js/Format.js" type="text/javascript"></script>
<script type="text/javascript">
     //layui数据表格
    layui.use('table', function () {
        var table = layui.table
        ,form = layui.form;
        table.render({
            elem: '#test'
            , url: '/Picture/GetPicture'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                 { field: 'Pic_Id', width: 70, title: '图片编号', sort: true, }
                , { field: 'ProductId', width: 120, title: '商品Id' }
                , { field: 'Pic_Desc', width: 140, title: '图片描述', sort: true }
                , { field: 'Pic_Url', width: 200, title: '缩略图', height: 500, templet: '#imgUrl' }
                , { field: 'Pic_Order', width: 140, title: '图片排序', sort: true }
                , { field: 'Is_Master', title: '是否主图', width: 150, align: 'center', templet: '#switchConnection', unresize: true }
                , { field: 'Pic_Status', title: '是否有效', width: 120, align: 'center', templet: '#switchNewWindows', unresize: true }
                , { field: 'ModifiedTime', title: '最后修改时间', width: 150, templet: "<div>{{Format(d.ModifiedTime,'yyyy-MM-dd hh:mm:ss')}}</div>", sort: true }
                , { fixed: 'right', title: '操作', width: 235, align: 'center', toolbar: '#barDemo' }
            ]]
            , page: true
            , id: 'testReload'
        });

         //是否主图切换
        form.on('switch(sexDemo2)', function (obj) {
                var id = this.id;
                var states = this.value;
                var tip = "设置为主图";
                if (this.value === "1") {
                    tip = "取消设置主图";
                    states = 0;
                }
                else {
                    states = 1;
                }
                //启用的功能代码
                layer.confirm('真的要' + tip + '吗', function (index) {
                    $.ajax({
                        url: "/Picture/UpdateMaster?id=" + id + "&states=" + states,
                        type: "Post",
                        success: function (data) {
                            if (data.Success) {
                                layer.msg(tip + '成功！', {
                                    title: '提示框',
                                    icon: 1,
                                    time: 2000
                                }, function () {
                                    window.location.reload();
                                    layer.close(index);
                                });
                            }
                            else {
                                layer.msg(tip + '失败！', {
                                    title: '提示框',
                                    icon: 1,
                                    time: 2000
                                });
                            }
                        }
                    });
                });
            });


            //是否有效状态切换
            form.on('switch(sexDemo3)', function (obj) {
                var tip = "启用";
                var id = this.id;
                var states = this.value;
                if (this.value == "1") {
                    tip = "关闭";
                    states = 0;
                }
                else {
                    states = 1;
                }
                //启用的功能代码
                layer.confirm('真的要' + tip + '吗', function (index) {
                    $.ajax({
                        url: "/Picture/UpdatePicState?id=" + id + "&states=" + states,
                        type: "Post",
                        success: function (data) {
                            if (data.Success) {
                                layer.msg(tip + '成功！', {
                                    title: '提示框',
                                    icon: 1,
                                    time: 2000
                                }, function () {
                                     window.location.reload();
                                    layer.close(index);
                                });
                            }
                            else {
                                layer.msg(tip + '失败！', {
                                    title: '提示框',
                                    icon: 1,
                                    time: 2000
                                });
                            }
                        }
                    });
                });
            });

        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            var id = data.Pic_Id;
            if (obj.event === 'del') {
                layer.confirm('确认删除', function (index) {
                    $.ajax({
                        url: "/Picture/DeletePicture",
                        type: "post",
                        data:data,
                        success: function (result) {
                            if (result.Success) {
                                layer.msg('删除成功', {
                                    title: '提示框',
                                    icon: 0,
                                    time: 2000
                                }, function () {
                                   window.location.reload(true);
                                });
                                layer.close(index);
                            }
                            else {
                                layer.msg('删除有误', {
                                    title: '提示框',
                                    icon: 0,
                                    time: 1000
                                });
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                window.location.href = "/Home/Edit_Picture?id=" + id;
            }
        });
        //列表刷新
        function TableReload(id) {
            var table = layui.table;
            //获取页面管理员名称和时间
            var username = $("#username").val();
            var adddate = $("#start").val();
            //上述方法等价于
            table.reload('testReload', {
                where: { //设定异步数据接口的额外参数，任意设
                    username: username,
                    adddate: adddate,
                    Id: id
                }
            });
        }

        //查询按钮点击事件
        $("#search").click(function () {
            TableReload(null);
        });
    });

	//设置内页框架布局
$(function() {
	$("#Sellerber").frame({
		float : 'left',
		color_btn:'.skin_select',
		Sellerber_menu:'.list_content',
		page_content:'.list_show',//内容
		datalist:".datatable_height",//数据列表高度取值
		header:65,//顶部高度
		mwidth:200,//菜单栏宽度

	});
});
//后台传入的 标题列表
var arr = [{
		id: 1,
		name: "食品/酒类/特产",
	    amount:234,
		pid: 0,

	}, {
		id: 2,
		name: "数码家电",
		amount:64,
		pid: 0,

	}, {
		id: 3,
		name: "家具/家居",
		amount:64,
		pid: 0,

	}, {
		id: 4,
		name: "电脑办公",
		amount:64,
		pid: 0,

	}, {
		id: 5,
		name: "图书影响",
		amount:64,
		pid: 0,

	}, {
		id: 6,
		name: "母婴用品",
		amount:64,
		pid: 0,

	}, {
		id: 13,
		name: "牛奶",
		amount:64,
		pid:1
	}, {
		id: 14,
		name: "面包",
		amount:64,
		pid:1
	}, {
		id: 15,
		name: "饼干",
		amount:64,
		pid:1
	}, {
		id: 16,
		name: "白酒",
		amount:64,
		pid:1
	}, {
		id: 17,
		name: "啤酒",
		amount:64,
		pid:1
	},  {
		id: 18,
		name: "红酒",
		amount:64,
		pid:1
	}, {
		id: 19,
		name: "音响",
		amount:64,
		pid:2
	}, {
		id: 20,
		name: "冰箱",
		amount:64,
		pid:2
	}, {
		id: 21,
		name: "洗衣机",
		amount:64,
		pid:2
	}, {
		id: 21,
		name: "洗衣机",
		amount:64,
		pid:3
	}, {
		id: 21,
		name: "洗衣机",
		amount:64,
		pid:4
	}, {
		id: 21,
		name: "洗衣机",
		amount:64,
		pid:5
	}

];
//树状图插件
$(".tree").ProTree({
	arr: arr,//数据
	simIcon: "fa fa-file-text-o",//单个标题字体图标 不传默认glyphicon-file
	mouIconOpen: "fa fa-folder-open",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
	mouIconClose:"fa fa-folder",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close

})
	
/*产品-停用*/
function member_stop(obj,id){
	layer.confirm('确认要下架该产品吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="上架">上架</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
		$(obj).remove();
		layer.msg('已下架!',{icon: 5,time:1000});
	});
}
/*产品-启用*/
function member_start(obj,id){
	layer.confirm('确认要上架改该产品吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-status" onClick="member_stop(this,id)" href="javascript:;" title="下架">下架</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上架</span>');
		$(obj).remove();
		layer.msg('已上架!',{icon: 6,time:1000});
	});
}
/*产品-编辑*/
function member_edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*产品-删除*/
function member_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
	});
}
</script>
